import styled from 'styled-components'

export const Container = styled.div`
    width: 100%;
    box-shadow: 0 0 10px ${props=>props.theme.cardShadowColor};
    transition: ease-in-out 0.3s;
    border-radius: 6px;
    padding: 6px 0;
    &:hover{
        box-shadow: 6px 6px 10px ${props=>props.theme.cardShadowColor};
        transition: ease-in-out 0.3s;
    }
    @media (max-width: 1200px) {
        &:hover{
            box-shadow: 0 0 10px ${props=>props.theme.cardShadowColor};
            transition: none;
        }
    }
    .card-title{
        font-size: 16px;
        color: ${props=>props.theme.cardTitleColor};
        font-weight: bold;
        margin: 0 28px;
        border-bottom: 1px solid ${props=>props.theme.cardTitleBorderColor};
        position: relative;
        .extra{
            position: absolute;
            right: 0;
            top: 10px;
            font-weight: normal;
            font-size: 14px;
        }
        .title{
            display: inline-block;
            padding: 10px 0;
            position: relative;
            width: 100%;
            transition: ease-in-out 0.3s;
            &::after{
                content: '';
                width: 20%;
                border-bottom: #1890ff solid 2px;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            &:hover{
                width: 116%;
                transition: ease-in-out 0.3s;
            }
            @media (max-width: 1200px) {
                &:hover{
                    width: 100%;
                    transition: none;
                }
            }
        }
    }
`